<template>
	<view class='pages'>
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<!-- <view class="search">
				<u--input @confirm="handleinput" @clear="handleclear" v-model="search" placeholder="请输入内容" prefixIcon="search" border="none" clearable></u--input>
			</view> -->
			<view class="uniBtn navs">
				<view :class="{'navbox':type=='all'}" @click="tabs('all')">全部</view>
				<view :class="{'navbox':type=='pay'}" @click="tabs('pay')">待付款</view>
			<!-- 	<view :class="{'navbox':type=='delivery'}" @click="tabs('delivery')">待发货</view>
				<view :class="{'navbox':type=='take'}" @click="tabs('take')">待收货</view> -->
				<view :class="{'navbox':type=='finish'}" @click="tabs('finish')">已完成</view>
				<view :class="{'navbox':type=='close'}" @click="tabs('close')">已关闭</view>
			</view>
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view v-if="!token">
				<button class="submit-btn" hover-class="other-button-hover" @click="mnpLogin">
					微信授权登录
				</button>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index" @click.stop="detail(item.id,item.pingjia)">
				<view class="uniBtn title">
					<view>{{item.order_goods[0].goods_name}}</view>
					<view>{{item.order_status_desc}}</view>
				</view>
				<view class="uniBtn box">
					<view class="uniFlex b">
						<image class="b1" :src="item.order_goods[0].goods_image" mode=""></image>
						<view>
							<view>房间位置：{{item.fangjian.title}} {{item.fangjian.address}}</view>
							<view style="margin: 6rpx 0;">
								使用时间：{{item.yytime}}
								<text style="margin-right: 10rpx;"></text>
								{{item.order_goods[0].spec_value_str}}
							</view>
							<view>下单时间：{{item.pay_time}}</view>
						</view>	
					</view>
					<view class="money">￥{{item.order_amount}}</view>
				</view>
				<view class="uniEnd base">
					<view v-if="item.order_status=='0'" @click.stop="mybtn(1,item.id)">取消订单</view>
					<view v-if="item.order_status=='0'" @click.stop="payment(item.id)">立即支付</view>
					<!-- <view v-else-if="item.order_status=='2'" @click.stop="use(item.id)">去使用</view> -->
					<view v-if="item.order_status==3&&item.pingjia==0" @click.stop="speck(item.order_goods[0].ogid)">去评价</view>
					<view v-if="item.order_status==4" @click.stop="mybtn(2,item.id)">删除订单</view>
					<!-- <view v-else-if="item.order_status=='2'" @click.stop="mybtn(3,item.id)">取消退款</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCode
	} from "@/utils/login";
	export default {
		data() {
			return {
				search:'',
				type:'all',
				page: 1,
				limit: 20,
				length: true,
				list: [
					// {id:1,order_status:1},
					// {id:1,order_status:2},
					// {id:1,order_status:3},
					// {id:1,order_status:4,tuistu:2},
					// {id:1,order_status:4}
				],
				token:''
			}
		},
		async onLoad(options) {
			if(uni.getStorageSync('token')){
				this.token = uni.getStorageSync('token');
				this.type = options.type;
				await this.getList();
			}
		},
		methods: {
			// 小程序微信登录
			async mnpLogin() {
				uni.showLoading({
					title: "登录中...",
					mask: true,
				});
				const wxCode = await getCode();
				// 这里假设通过code注册成功,然后进一步判断
				let res = await this.$api.getCode2({
					code: wxCode
				});
				if(res.code == 1){
					uni.hideLoading()
					uni.setStorageSync('token',res.data.token);
					this.token = res.data.token;
					this.page = 1;
					this.list = [];
					this.getList()
				}else{
					uni.hideLoading()
				}
			},
			// 搜索
			handleinput(e){
				console.log(this.search);
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 清空
			handleclear(){
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 切换
			tabs(type){
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					return;
				}
				this.type = type;
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList();
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				let res = await this.$api.orderlists({
					type: this.type,
					page_no: this.page,
					page_size: this.limit
				});
				if (res.code == 1) {
					this.length = res.data.lists.length == this.limit;
					this.list.push(...res.data.lists);
					// 关闭下拉
					uni.stopPullDownRefresh();
				}
			},
			// 详情
			detail(id,pingjia){
				uni.navigateTo({
					url:'./orderdetail/orderdetail?id='+id+'&pingjia='+pingjia
				})
			},
			// 1取消支付  2删除订单   3取消退款
			mybtn(num,id){
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认操作！',
					cancelColor: '#B3B3B3',
					confirmText: '确定',
					confirmColor: '#E2867E',
					// showCancel:false,
					success: function(res) {
						if (res.confirm) {
							if(num==1){
								that.delpay(id);
							}else if(num==2){
								that.cutout(id);
							}else if(num==3){
								that.cancel(id);
							}
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			// 取消支付
			async delpay(id){
				let res = await this.$api.delpay({
					id:id
				});
				if (res.code == 1) {
					uni.showToast({
						title: '取消成功',
						duration: 2000
					});
					this.page = 1;
					this.list = [];
					this.getList();
				}
			},
			// 删除订单
			async cutout(id){
				let res = await this.$api.cutout({
					id:id
				});
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.page = 1;
					this.list = [];
					this.getList();
				}
			},
			// 取消退款
			async cancel(id){
				
			},
			// 支付
			async payment(id){
				let that = this;
				uni.showLoading();
				let params = {
					from: 'order',
					pay_way: 2,
					order_id: id
				};
				let res = await this.$api.prepay(params);
				if (res.code == 1) {
					// console.log(res)
					uni.hideLoading();
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.config.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.config.nonceStr, // 随机字符串
						package: res.data.config.package, // 固定值
						signType: res.data.config.signType, // 签名算法，这里用的 MD5/RSA 签名
						paySign: res.data.config.paySign, //签名
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							setTimeout(function () {
								that.type = 'finish';
								that.page = 1;
								that.list = [];
								that.getList()
							}, 1500);
						},
						fail(e) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.hideLoading();
				}
			},
			// 使用
			use(id){
				uni.navigateTo({
					url:'/pages/index/rooms/information'
				})
			},
			// 评价
			speck(id){
				uni.navigateTo({
					url:'./speck/speck?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.submit-btn {
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 41px;
		color: #fff;
		font-size: 30rpx;
		margin: 80rpx 35rpx 60rpx;
		background: #E2867E;
	}
	.contentbox {
		flex: 1;
		overflow: hidden;
		padding: 30rpx 0;

		.search {
			background: #fff;
			border-radius: 35rpx;
			padding: 10rpx 30rpx;
			margin:30rpx;
			margin-top: 0;
		}
		
		.navs{
			padding: 22rpx 50rpx;
			font-size: 28rpx;
			color: #000000;
			font-weight: bold;
			
			view{
				padding-bottom: 20rpx;
				border-bottom: 3rpx solid #F2F2F2;
			}
			
			.navbox{
				color: #AA3128;
				border-bottom: 3rpx solid #AA3128;
			}
		}
		
		.boxes {
			margin: 20rpx 30rpx;
			padding:20rpx;
			position: relative;
			background: #fff;
			border-radius:20rpx;

			.title {
				font-weight: bold;

				view {
					&:nth-child(1) {
						font-size: 36rpx;
						color: #000;
					}

					&:nth-child(2) {
						font-size: 28rpx;
						color: #525252;
					}
				}
			}

			.box {
				margin: 30rpx 0;
				.b{
					font-size: 24rpx;
					.b1{
						width: 110rpx;
						height: 110rpx;
						margin-right: 30rpx;
					}
				}
				.money{
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		
			.base{
				view {
					text-align: center;
					width: 160rpx;
					height: 60rpx;
					line-height: 58rpx;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-weight: 400;
					&:nth-child(1) {
						color: #000;
						border: 1px solid #E1E1E1;
					}
					&:nth-child(2) {
						color: #AA3128;
						border: 1px solid #F0BFBB;
						margin-left: 35rpx;
					}
				}
			}
		}
	}
</style>